<script setup>
import { ref, defineProps, onMounted } from "vue"
import request from '@/api/request'
import { ElMessage } from 'element-plus'

let emits = defineEmits(["ref-table"])

// 定义属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

// 表单数据
const process = ref({
  isEnabled: props.data.isEnabled ?? '1' // 默认启用
})

// 自动生成功能相关
const autoGenerate = ref(false)

// 组件挂载时如果开启自动生成则生成编号
onMounted(() => {
  if (autoGenerate.value) {
    generateProcessId()
  }
})

// 生成工艺路线编号
const generateProcessId = () => {
  const timestamp = new Date().getTime().toString()
  return 'Route' + timestamp.substring(timestamp.length - 8)
}

// 处理自动生成功能开关
const handleAutoGenerate = (val) => {
  if (val) {
    // 开启自动生成
    process.value.processRouteId = generateProcessId()
  } else {
    // 关闭自动生成，清空编号
    process.value.processRouteId = ''
  }
}

// 重新生成编号
const regenerateCode = () => {
  if (autoGenerate.value) {
    process.value.processRouteId = generateProcessId()
  }
}

let onSubmit = () => {
  // 表单验证
  if (!process.value.processRouteId) {
    ElMessage.warning('编号不能为空')
    return
  }
  
  if (!process.value.processRouteName) {
    ElMessage.warning('名称不能为空')
    return
  }
  
  request({
    url: '/process/insert',
    method: 'post',
    data: {
      ...process.value
    }
  }).then(res => {
    if (res.code !== 200) {
      ElMessage.error(res.message || res.data)
    } else {
      ElMessage.success('添加成功')
      emits("ref-table")
      // 如果开启自动生成，成功后生成新的编号
      if (autoGenerate.value) {
        process.value.processRouteId = generateProcessId()
        // 其他字段重置
        process.value.processRouteName = ''
        process.value.remark = ''
        process.value.processRouteIllustrate = ''
      }
    }
  }).catch(error => {
    ElMessage.error('请求失败: ' + error.message)
  })
}
</script>

<template>
  <div>
    <el-card>
      <template #header>
        <el-form :model="process" label-width="80px" class="card_wrap">
          
            <el-form-item label="编号" class="c_item_big">
              <div style="display: flex; align-items: center;">
                <el-input 
                  v-model="process.processRouteId" 
                  style="width: 150px;"
                  :readonly="autoGenerate"
                  placeholder="请输入编号"
                ></el-input>
                <el-switch 
                  v-model="autoGenerate"
                  active-text="自动生成"
                  @change="handleAutoGenerate"
                  style="margin-left: 15px;"
                />
                <el-button 
                  v-if="autoGenerate"
                  @click="regenerateCode"
                  style="margin-left: 10px;"
                  size="small"
                >
                  重新生成
                </el-button>
              </div>
            </el-form-item>
            
            <el-form-item label="名称" class="c_item">
              <el-input 
                v-model="process.processRouteName" 
                style="width: 150px;"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
            
            <el-form-item label="是否启用" class="c_item">
              <el-radio-group v-model="process.isEnabled">
                <el-radio label="是" value="0">是</el-radio>
                <el-radio label="否" value="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          
          
          <el-form-item label="备注" class="c_item_big">
            <el-input 
              v-model="process.remark" 
              placeholder="请输入内容" 
              style="width: 800px;"
              type="textarea"
              :rows="3"
            ></el-input>
          </el-form-item>
          
          <el-form-item label="说明" class="c_item_big">
            <el-input 
              v-model="process.processRouteIllustrate" 
              placeholder="请输入内容" 
              style="width: 800px;"
              type="textarea"
              :rows="3"
            ></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="onSubmit" class="right-bottom">立即添加</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-card>
  </div>
</template>

<style scoped>
.c_item {
  flex: 1;
  margin: 0px 5px 15px 0;
  width: calc((100% - 10px) / 3);
  min-width: calc((100% - 10px) / 3);
  max-width: calc((100% - 10px) / 3);
}

.c_item_big {
  flex: 2;
  margin: 0px 5px 15px 0;
  width: calc((100% - 10px) / 1);
  min-width: calc((100% - 10px) / 1);
  max-width: calc((100% - 10px) / 1);
}

.card_wrap {
  width: 98%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.right-bottom {
  margin-top: 10px;
  margin-left: 850px;
}

.form-row {
  display: flex;
  width: 100%;
}
</style>